<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="refresh" content="10">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
	<title>Remote Monitor</title>
	</head>
	<body>
		{% for model_filename in Args.keys() %}
		<div class="py-5">
			<div class="container">
			  <div class="row">
				<div class="col-md-8">
					<p class="lead">{{ model_filename }} </p>
				</div>
			  </div>
			  <div class="row">
				<div class="col-md-8">
				  <div class="progress">
					  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: {{ Args[model_filename]['process_rate'] }}%" aria-valuenow="{{ Args[model_filename]['process_rate'] }}" aria-valuemin="0" aria-valuemax="100">{{ Args[model_filename]['process_rate'] }}%</div>
				  </div>
				</div>
			  </div>
			  <div class="row">
				<div class="col-md-12">
					<p class="">Epoch: {{ Args[model_filename]['epoch'] }}/{{ Args[model_filename]['epochs_num'] }}, 
								Time: {{ Args[model_filename]['now_time'] }}/{{ Args[model_filename]['est_time'] }}, 
								Loss = {{ Args[model_filename]['loss'] }}, Metric = {{ Args[model_filename]['metric'] }}</p>
				</div>
			  </div>
			</div>
		</div>
		{% endfor %}
	</body>
</html>
